<!-- form表单 -->
<template>
  <div>
    <el-form :model="formData" :rules="rules" ref="ruleForm" :label-width="labelWidth" :inline="formInline"
      @submit.native.prevent  :label-position="labelPosition">
      <template v-for="(item, index) in formConfig">
        <el-form-item :label="item.label" :prop="item.prop" :class="item.class ? item.class : ''" v-if="!item.hide">
          <!-- 输入框 -->
          <el-input v-if="item.type === 'input' && !item.hide" v-model.trim="formData[item.prop]"
            :ref="formData[item.refId]" :disabled="item.disabled"
            :placeholder='item.placeholder != undefined ? item.placeholder : "请输入搜索内容"' :size="size"
            :readonly="item.readonly" :maxlength="item.maxlength"
            @keyup.enter.native="item.enter && item.enter(formData[item.prop])"
            @blur="item.blur && item.blur(formData[item.prop])" @focus="item.focus && item.focus(formData[item.prop])"
            :style="{ width: item.width }" @input="item.change && item.change(formData[item.prop])">
          </el-input>

          <!-- 输入框插入单位 -->
          <el-input v-if="item.type === 'inputUnit' && !item.hide" v-model.trim="formData[item.prop]"
            :disabled="item.disabled" :placeholder='item.placeholder != undefined ? item.placeholder : "请输入搜索内容"'
            :size="size" :readonly="item.readonly" :maxlength="item.maxlength"
            @keyup.enter.native="item.enter && item.enter(formData[item.prop])"
            @focus="item.focus && item.focus(formData[item.prop])" :style="{ width: item.width }"
            @change="item.change && item.change(formData[item.prop])">
            <span slot="suffix">{{ item.unit }}</span>
          </el-input>

          <!-- div -->
          <div v-if="item.type === 'div'">{{ formData[item.prop] }}</div>

          <!-- 密码框 -->
          <el-input v-if="item.type === 'password' && !item.hide" type="password" v-model.trim="formData[item.prop]"
            :placeholder='item.placeholder != undefined ? item.placeholder : "请输入搜索内容"' :maxlength="item.maxlength"
            @focus="item.focus && item.focus(formData[item.prop])" :size="size"
            @keyup.enter.native="item.enter && item.enter(formData[item.prop])" autocomplete="off"
            :readonly="item.readonly" :style="{ width: item.width }"
            @change="item.change && item.change(formData[item.prop])"
            :clearable="item.clearable != void 0 ? item.clearable : true" show-password></el-input>

          <!-- 文本域 -->
          <el-input v-if="item.type === 'textarea' && !item.hide" type="textarea" v-model.trim="formData[item.prop]"
            :size="size" :placeholder='item.placeholder != undefined ? item.placeholder : "请输入搜索内容"'
            @focus="item.focus && item.focus(formData[item.prop])"
            @keyup.enter.native="item.enter && item.enter(formData[item.prop])" :disabled="item.disabled" show-word-limit
            :readonly="item.readonly" :style="{ width: item.width }" :maxlength="item.maxlength"
            @change="item.change && item.change(formData[item.prop])">
          </el-input>

          <!-- 下拉框 -->
          <el-select v-if="item.type === 'select' && !item.hide" v-model="formData[item.prop]" :disabled="item.disabled"
            :value-key="item.valueKey" :multiple="item.multiple" :no-match-text="item.noMatchText"
            :filterable="item.filterable" :size="size" :style="{ width: item.width }"
            @change="item.change && item.change(formData[item.prop])"
            :placeholder='item.placeholder != undefined ? item.placeholder : "请选择"'
            :clearable="item.clearable != void 0 ? item.clearable : true">
            <el-option v-for="(option, index) in item.options" :label="option.description"
              :disabled="option.disabled ? option.disabled : false" :value="option.dataCode" :key="index">
            </el-option>
          </el-select>

          <!-- 单选框 -->
          <el-radio-group v-if="item.type === 'radio' && !item.hide" v-model="formData[item.prop]"
            :disabled="item.disabled" :size="size" @change="item.change && item.change(formData[item.prop])">
            <el-radio v-for="radio in item.radios" :label="radio.dataCode" :key="radio.dataCode">
              {{ radio.description }}</el-radio>
          </el-radio-group>

          <!-- 复选框 -->
          <el-checkbox-group v-if="item.type === 'checkbox' && !item.hide" v-model="formData[item.prop]" :size="size"
            :disabled="item.disabled" @change="item.change && item.change(formData[item.prop])">
            <el-checkbox v-for="checkbox in item.checkboxs" :label="checkbox.dataCode" :key="checkbox.dataCode">
              {{ checkbox.description }}
            </el-checkbox>
          </el-checkbox-group>

          <!-- 时间选择器范围 -->
          <el-date-picker v-if="item.type === 'dateRange' && !item.hide" v-model="formData[item.prop]" type="daterange"
            range-separator="至" start-placeholder="选择开始时间" end-placeholder="选择结束时间" :size="size"
            :disabled="item.disabled" :readonly="item.readonly"
            :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
            @change="item.change && item.change(formData[item.prop])" :picker-options="item.pickerOptions"
            :default-time="item.defaultTime ? item.defaultTime : ['00:00:00', '23:59:59']">
          </el-date-picker>

          <!-- 时间日期选择器范围 -->
          <el-date-picker v-if="item.type === 'datetimerange'" v-model="formData[item.prop]" type="datetimerange"
            range-separator="至" start-placeholder="选择开始时间" end-placeholder="选择结束时间" :size="size"
            :disabled="item.disabled" :readonly="item.readonly"
            :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
            :format="item.format ? item.format : 'yyyy-MM-dd HH:mm:ss'"
            @change="item.change && item.change(formData[item.prop])"
            :default-time="item.defaultTime ? item.defaultTime : ['00:00:00', '23:59:59']">
          </el-date-picker>

          <!-- 时间选择器 -->
          <el-date-picker v-if="item.type === 'date'" v-model="formData[item.prop]" type="date"
            :placeholder='item.placeholder != undefined ? item.placeholder : "请选择"' :size="size"
            :disabled="item.disabled" @focus="item.focus && item.focus(formData[item.prop])"
            :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
            @blur="item.blur && item.blur(formData[item.prop])" :picker-options="item.pickerOptions"
            @change="item.change && item.change(formData[item.prop])">
          </el-date-picker>

          <!-- 年份选择器 -->
          <el-date-picker v-if="item.type === 'year'" v-model="formData[item.prop]" type="year"
            :placeholder='item.placeholder != undefined ? item.placeholder : "请选择"' :size="size"
            :disabled="item.disabled" @focus="item.focus && item.focus(formData[item.prop])"
            :value-format="item.valueFormat ? item.valueFormat : 'yyyy'"
            :clearable="item.clearable != void 0 ? item.clearable : true"
            @blur="item.blur && item.blur(formData[item.prop])" :picker-options="item.pickerOptions"
            @change="item.change && item.change(formData[item.prop])">
          </el-date-picker>

          <!-- 月份范围选择器 -->
          <el-date-picker v-if="item.type === 'monthrange' && !item.hide" v-model="formData[item.prop]"
            type="monthrange" range-separator="至" start-placeholder="--请选择--" end-placeholder="--请选择--" size="mini"
            :disabled="item.disabled" :readonly="item.readonly"
            :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
            @change="item.change && item.change(formData[item.prop])" :picker-options="item.pickerOptions">
          </el-date-picker>

          <!-- 时间日期选择器 -->
          <el-date-picker v-if="item.type === 'datetime'" v-model="formData[item.prop]" type="datetime"
            :placeholder='item.placeholder != undefined ? item.placeholder : "请选择"' :size="size"
            @focus="item.focus && item.focus(formData[item.prop])" :disabled="item.disabled"
            :value-format="item.valueFormat ? item.valueFormat : 'yyyy-MM-dd HH:mm:ss'"
            :picker-options="item.pickerOptions" @change="item.change && item.change(formData[item.prop])">
          </el-date-picker>

          <!-- 时分秒选择器 -->
          <el-time-picker v-if="item.type === 'timePerSecond'" v-model="formData[item.prop]"
            :placeholder='item.placeholder != undefined ? item.placeholder : "请选择"' :size="size"
            @focus="item.focus && item.focus(formData[item.prop])" :disabled="item.disabled"
            :value-format="item.valueFormat ? item.valueFormat : 'HH:mm:ss'" :picker-options="item.pickerOptions"
            @change="item.change && item.change(formData[item.prop])">
          </el-time-picker>

          <!-- 时间范围选择器 -->
          <el-time-picker v-if="item.type === 'timePickerRange'" v-model="formData[item.prop]"
            is-range
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            placeholder="选择时间范围">
          </el-time-picker>

          <!-- 开关 -->
          <el-switch v-if="item.type === 'switch'" v-model="formData[item.prop]" :disabled="item.disabled" size="mini"
            @change="item.change && item.change(formData[item.prop])"></el-switch>

          <!-- 级联 -->
          <el-cascader v-if="item.type === 'cascader'" size="mini" v-model="formData[item.prop]"
            :disabled="item.disabled" :readonly="item.readonly" :options="item.options" :style="{ width: item.width }"
            @change="item.change && item.change(formData[item.prop])"
            :clearable="item.clearable != void 0 ? item.clearable : true">
          </el-cascader>

          <!-- 上传/富文本编辑器/操作按钮 -->
          <slot :name="item.slotName"
            v-if="item.slotName"></slot>
        </el-form-item>
      </template>
    </el-form>
  </div>
</template>

<script lang="ts">
import Vue from "vue";

export default Vue.extend({
  props: {
    // 表单域标签的宽度
    labelWidth: {
      type: String,
      default: "",
    },
    // 表单域标签的位置
    labelPosition: {
      type: String,
      default: "right",
    },
    // 表单配置
    formConfig: {
      type: Array,
      required: true,
    },
    // 表单数据
    formData: {
      type: Object,
      required: true,
    },
    // 级联数据
    options: {
      type: Array,
    },
    formInline: {
      type: Boolean,
      default: true,
    },
    size: {
      type: String,
      default: "mini",
    },
  },
  computed: {
    rules() {
      let rules = this.formConfig.reduce((map, i) => {
        if (i.rules != undefined) {
          map[i.prop] = i.rules;
        }
        return map;
      }, {});
      return rules;
    },
  },
  created() {},
  methods: {
    // 上传文件之前的方法
    beforeUpload(file) {
      this.$emit("uploadbefore", file);
    },
    importFileFun(file) {
      this.$emit("importFileFun", file);
    },
    submitValidate() {
      let flag = false;
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          flag = true;
        }else{
          this.toast("请填写完必填数据", "error");
        }
      });
      return flag;
    },
    // 清除校验
    clearForm() {
      let that = this;
      if (that.$refs.ruleForm !== undefined) {
        that.$nextTick(() => {
          that.$refs.ruleForm.clearValidate();
        });
      }
    },
  },
});
</script>

<style lang="less" scoped>

</style>